<template>
  <div class="newPatentDetails-container-padding">
    <div class="buttonList">
      <el-button v-if="!isEdit" type="primary" @click="edit">
        编辑专利信息
      </el-button>
      <el-button v-else type="primary" @click="save">保存</el-button>
      <el-button type="danger" @click="del">删除</el-button>
    </div>
    <!-- <el-form :model="formInline" class="form-inline" label-width="auto" inline>
      <el-form-item v-for="item in patentDescriptions" :key="item.value" :label="item.label">
        <el-input v-model="formInline[item.value]" :placeholder="`请输入${item.label}`" clearable :disabled="!isEdit" />
      </el-form-item>
    </el-form> -->
    <el-descriptions title="" :column="3">
      <el-descriptions-item v-for="item in patentDescriptions" :key="item.label" :label="item.label">
        {{ formInline[item.value] }}
      </el-descriptions-item>
    </el-descriptions>
    <div class="inventor">
      <p>发明人：</p>
      <vxe-grid ref="xGrid" v-bind="patentPeople" :height="height" style="margin-top: 20px; width: 100%">
        <!-- <template #operate="{ row }">
          <template v-if="hasActiveEditRow(row)">
            <vxe-button content="取消" />
            <vxe-button status="primary" content="保存" @click="saveRowEvent(row)" />
          </template>
<template v-else>
            <vxe-button content="编辑" :disabled="!isEdit" @click="editRowEvent(row)" />
          </template>
<vxe-button status="danger" content="删除" :disabled="!isEdit" @click="removeRowEvent(row)" />
</template> -->
        <!-- <template #patentName_edit="{ row }">
          <vxe-input v-model="row.patentName" />
        </template>
        <template #patentPhone_edit="{ row }">
          <vxe-input v-model="row.patentPhone" />
        </template>
        <template #patentType_edit="{ row }">
          <vxe-input v-model="row.patentType" />
        </template>
        <template #date_edit="{ row }">
          <vxe-input v-model="row.date" />
        </template> -->
      </vxe-grid>
      <el-button v-if="isEdit" type="primary" text :icon="Plus" @click="addInventor">
        增加发明人
      </el-button>
    </div>
    <el-divider />
    <div class="title">操作日志</div>
    <vxe-grid v-bind="operationLog" :height="height">
      <template #pager>
        <!--使用 pager 插槽-->
        <vxe-pager v-model:current-page="tablePage.currentPage" v-model:page-size="tablePage.pageSize" :layouts="[
          'Sizes',
          'PrevJump',
          'PrevPage',
          'Number',
          'NextPage',
          'NextJump',
          'FullJump',
          'Total',
        ]" :total="tablePage.total" @page-change="handlePageChange" />
      </template>
    </vxe-grid>
  </div>
</template>

<script setup lang="ts">
import {
  patentDescriptions,
  patentPeople,
  operationLog,
} from '../table/column'
import { reactive, ref, onMounted } from 'vue'
import {
  VxePagerEvents,
  VXETable,

} from 'vxe-table'
import { Plus } from '@element-plus/icons-vue'
import { getPatentInfo, deletePatent } from '@/api/property'
import { useRoute, useRouter } from 'vue-router'
import { useCloseTabNavigate } from '@/utils/useCloseTabNavigate'

const formInline = ref({})
const route = useRoute()
const router = useRouter()
const id = route.query.id ?? undefined
const { closeTabNavigate } = useCloseTabNavigate()
onMounted(() => {
  if (id) {
    getPatentInfo({ id: id , getType: 2}).then((res) => {
      formInline.value = res.data
      patentPeople.data = res.data?.inventors
    })
  }
})
const xGrid = ref()
const isEdit = ref(false)
const save = () => {
  isEdit.value = false
}
const edit = () => {
  // isEdit.value = true
  router.push({ path: '/property/patent/add', query: { id: id } })
}

// const hasActiveEditRow = (row: any) => {
//   const $grid = xGrid.value
//   if ($grid) {
//     return $grid.isEditByRow(row)
//   }
//   return false
// }

// const editRowEvent = (row: any) => {
//   const $grid = xGrid.value
//   if ($grid) {
//     $grid.setEditRow(row)
//   }
// }

// const saveRowEvent = async (row: any) => {
//   const $grid = xGrid.value
//   if ($grid) {
//     await $grid.clearEdit()
//     patentPeople.loading = true
//     // 模拟异步保存
//     setTimeout(() => {
//       patentPeople.loading = false
//       // VXETable.modal.message({ content: `${JSON.stringify(row)}`, status: 'success' })
//     }, 300)
//   }
// }

// const removeRowEvent = async (row: any) => {
//   const $grid = xGrid.value
//   // console.log($grid.data.length,'====');

//   // if($grid.data.length === 1){
//   //   VXETable.modal.message({ content: '至少需要保留一条数据', status: 'error' })
//   //   return
//   // }

//   const type = await VXETable.modal.confirm('您确定要删除该数据?')
//   if ($grid) {
//     if (type === 'confirm') {
//       await $grid.remove(row)
//     }
//   }
// }

const addInventor = () => {
  const $grid = xGrid.value
  $grid.insert({})
}

const tablePage = reactive({
  total: 0,
  currentPage: 1,
  pageSize: 10,
})

const handlePageChange: VxePagerEvents.PageChange = ({
  currentPage,
  pageSize,
}) => {
  tablePage.currentPage = currentPage
  tablePage.pageSize = pageSize
  // findList()
}

const del = () => {
  ElMessageBox.confirm('确定删除该条数据?', '删除', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning',
  }).then(() => {
    let params = Number(id)
    deletePatent(params).then((res) => {
      ElMessage({
        type: 'success',
        message: '删除成功',
      })
      closeTabNavigate({ name: 'Patent' })
    })
  })
}

const height = ref(0)
interface BaseTableHeight {
  (padding: number): number;
}
const $baseTableHeight = inject<BaseTableHeight>('$baseTableHeight')
onBeforeMount(() => {
  window.addEventListener('resize', handleHeight)
})

onBeforeUnmount(() => {
  window.removeEventListener('resize', handleHeight)
})

const handleHeight = () => {
  height.value = $baseTableHeight(0)
}
</script>

<style scoped lang="scss">
$margin-bottom: 20px;

.buttonList {
  display: flex;
  justify-content: end;
  padding-bottom: $margin-bottom;
  border-bottom: 1px solid #edeff2;
  margin-bottom: $margin-bottom;
}

.title {
  border-radius: 2px;
  border-left: 5px solid #1890ff;
  height: 28px;
  background: #f7f8f9;
  font-weight: 500;
  font-size: 14px;
  color: #606266;
  padding-left: 12px;
  line-height: 28px;
  // margin-bottom: $margin-bottom;
}

.form-inline {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-column-gap: 20px;

  :deep(.el-form-item) {
    margin-right: 0;
  }
}

.inventor {
  p {
    text-align: left;
  }

  text-align: center;
}
</style>
